<template>
  <div>
    <div id="title">药品订单管理</div>

    <div id="conditions">
      <div id="conditions-head">
        <i class="el-icon-search"></i>
        <span>筛选</span>
      </div>
      <el-form :inline="true"
               :model="conditionsform"
               class="form-inline">
        <el-form-item>
          <el-input v-model="conditionsform.keywords"
                    placeholder="输入订单号或用户名"></el-input>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker v-model="conditiontime"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div id="medicineorder">
      <div id="medicineorder-head">
        <i class="el-icon-document"></i>
        <span>数据列表</span>
      </div>
       <div style="width: 100%">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待发货" name="second"></el-tab-pane>
            <el-tab-pane label="待收货" name="third"></el-tab-pane>
            <el-tab-pane label="已收货" name="fourth"></el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <el-row>
        <el-row>
          <el-table :data="tableData" border style="width: 100%">
               <el-table-column prop="no" label="订单编号" width="100"></el-table-column>
            <el-table-column prop="join_time"
                             label="提交时间"
                             width="100"></el-table-column>
            <el-table-column prop="name"
                             label="用户名"
                             width="100"></el-table-column>
            <el-table-column prop="receiver"
                             label="收货人"
                             width="100"></el-table-column>
            <el-table-column prop="price"
                             label="订单金额"
                             width="100"></el-table-column>
            <el-table-column prop="status"
                             label="订单状态"
                             width="100"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="showMedicineOrderDetails(scope)">查看订单</el-button>
                <!-- <el-button type="text"
                           size="small"
                           v-if="scope.row.status==1">订单发货</el-button>
                <el-button type="text"
                           size="small"
                           v-if="scope.row.status==2">确认收货</el-button>
                <el-button type="text"
                           size="small"
                           v-if="scope.row.status==3">订单追踪</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
             <pageinfo
          :num="pageinit.total"
          :currentPage="pageinit.currentPage"
          :pageSize="pageinit.pageSize"
          @changeSize="changeSize"
          @changeCurrent="changeCurrent"
        ></pageinfo>
         <el-dialog
          title="订单详情"
          :visible.sync="editFormVisible"
          width="60%"
          @click="closeDialog"
        > 
          <div>
        
        <div id="orderinfo">
            <el-descriptions title="订单信息">
                <el-descriptions-item label="订单编号">{{ordermessage.no}}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{ordermessage.price}}</el-descriptions-item>
                <el-descriptions-item label="状态" v-if="ordermessage.status == 0">待发货</el-descriptions-item>
                <el-descriptions-item label="状态" v-if="ordermessage.status == 1">已发货</el-descriptions-item>
                <el-descriptions-item label="提交时间">{{ordermessage.join_time}}</el-descriptions-item>
            </el-descriptions>
            
        </div>
        <br>
        <br>
        <div id="medicineinfo">
           <el-descriptions title="货物信息">
            </el-descriptions>
            <div id="user_message_medical">
        <div id="user_message_div_5" v-for="(item,index) in medicineMessage" :key="index">
          <div id="picture">
            <el-image style="width: 100px; height: 100px" :src="image_urls[index]" fit="scale-down" :preview-src-list="image_urls"></el-image>
          </div>
          <div class="user_message_div_5">
            <div id="rx">&nbsp;Rx</div>
            <div id="rx_name" >{{medicineMessage[index].name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x 1</div>
          </div>
          <div class="user_message_div_5">规格：{{medicineMessage[index].specifications}}</div>
          <div class="user_message_div_5" style="color: red">￥{{medicineMessage[index].price}}</div>
          <div id="user_message_div_6">药物描述：{{medicineMessage[index].description}}</div>
        </div>
      </div>
    </div>
        <br>
        <br>
        
        <div id="consigneeinfo" class="clear">
            <el-descriptions title="收货人信息">
                <el-descriptions-item label="收货人">{{patientmessage.name}}</el-descriptions-item>
                <el-descriptions-item label="电话">{{patientmessage.telphone}}</el-descriptions-item>
                <el-descriptions-item label="收货地址">{{patientmessage.address}}</el-descriptions-item>
            </el-descriptions>
        </div>
        <br>
        <br>   
    </div>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">返回</el-button>
          </div>
        </el-dialog> 
    </div>
  </div>
</template>

<script>
import pageinfo from '../guahao-order/pageinfo.vue';
export default {
  components: { pageinfo },
  name: "Feedback",
  data () {
    return {
     editFormVisible: false, //控制编辑页面显示与隐藏
       conditionsform: {
        keywords: '',

      },
       image_urls: [],
      medicineMessage:'',
      ordermessage: '',
      patientmessage: '',
       obj:{
        start:'',
        end:'',
        no:'',
        name:'',
      },
      conditiontime: '',
      activeName: 'all',
      tableData:[],
       pageinit: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      medicineIds:[]
    }
  },

  methods: {
    closeDialog() {
      this.editFormVisible = false;
    },
       //子传父的方法值
      changeSize(val) {
        this.pageinit.pageSize = val;
        this.pageinit.currentPage = 1;
        // 重新调用获取数据方法
        this.created();
      },
      changeCurrent(val) {
        this.pageinit.currentPage = val;
        // 重新调用获取数据方法
        this.created();
      },
    onSubmit () {
      this.obj.start = this.conditiontime[0]
      this.obj.end = this.conditiontime[1]
      this.obj.no=this.conditionsform.keywords
      this.obj.name=this.conditionsform.keywords
      this.$axios
        .post("http://localhost:12306/order/MedicineOrder/search",this.obj)
        .then((res) => {
          this.tableData = res.list;
          this.pageinit.total=res.data.data.length;
          console.log(res);
        });
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        }
        )
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    multipleDelete () {
      console.log('删删删删删删删删删删删删');
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    handleClick (tab, event) {
      alert(tab.index);
      if (tab.index == 0) {
        this.created();
      } else {
         let staus=tab.index
        this.$axios
          .get("http://localhost:12306/order/MedicineOrder/findByStatus/" + staus)
          .then((res) => {
            console.log(res.data.data);
            this.tableData = res.data.data;
            
          });
      }
    },
    showMedicineOrderDetails (scope) {
      alert(scope.row.id)
        this.$axios.get('/order/MedicineOrder/user/findByName/'+scope.row.name).then((res) => {
          console.log(res)
          this.patientmessage=res.data.data
          console.log(this.patientmessage);
        })
        this.$axios.get('/order/MedicineOrder/findByNo/' + scope.row.no).then((res) => {
          console.log(res)
          this.ordermessage = res.data.data
        //     let numdata=res.data.data
        //  for(const i in numdata){
        //       if(numdata[i].status==1){
        //          numdata[i].status="待发货"
        //       }else if(numdata[i].status==2){
        //            numdata[i].status="待收货"
        //       }
        //  }
        })
        //查询对应药品ids
        this.$axios.get('/order/MedicineOrder/findIds/'+scope.row.id).then((res) => {
          
          this.medicineIds = res.data.data
          console.log('药品id',res.data.data)
          //查询对应药品
          this.$axios.post('/order/medicine/medicine/batchFind',this.medicineIds).then((res) => {
            console.log('药品：',res)
            this.medicineMessage = res.data.data
            //进行图片地址赋值
              for (let index = 0; index < this.medicineMessage.length; index++) {
                this.image_urls[index] = this.medicineMessage[index].image;
              }
          })
        })
        
       this.editFormVisible = true;
    
    },
      created() {
      this.$axios
        .get("http://localhost:12306/order/MedicineOrder/findAll/"+ this.pageinit.currentPage +
              "/" +
              this.pageinit.pageSize)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.list;
          this.pageinit.total = res.data.data.total;
            let numdata=res.data.data.list
         for(const i in numdata){
              if(numdata[i].status==1){
                 numdata[i].status="待发货"
              }else if(numdata[i].status==2){
                   numdata[i].status="待收货"
              }
         }
          
   
        });
    },

  },
  created() {
    this.created();
  },
}
</script>

<style>
#title {
  font-size: 25px;
  font-weight: bolder;
}
#conditions {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 180px;
}
#conditions-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-search {
  margin-left: 10px;
  margin-top: 15px;
}
.form-inline {
  margin-top: 40px;
  margin-left: 90px;
}
#medicineorder {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 1000px;
}
#medicineorder-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-document {
  margin-left: 10px;
  margin-top: 15px;
}
#page {
  float: right;
}
#user_message_div_5 {
  float: left;
  width: 500px;
  overflow: hidden;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
}
#picture {
  border: 1px solid rgb(216, 216, 216);
  float: left;
  width: 100px;
  height: 100px;
}
.user_message_div_5 {
  float: left;
  width: 380px;
  height: 30px;
  margin-left: 10px;
}
#user_message_div_6 {
  float: left;
  overflow: hidden;
  margin-top: 10px;
}
#rx {
  width: 30px;
  background-color: rgb(221, 2, 2);
  border-radius: 30px;
  color: white;
  float: left;
}
#rx_name {
  float: left;
}
#rx_num {
  float: right;
}
.clear{
  clear:both;
}

</style>
